<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>崇阳百宝箱 - 您的多功能图片编辑工具</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/fontawesome/all.min.css">
    <link rel="preload" href="css/fontawesome/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="css/fontawesome/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="images/logo.png" alt="崇阳百宝箱" id="logo-img">
                <h1>崇阳百宝箱</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#home" class="active">首页</a></li>
                    <li><a href="#features">功能特点</a></li>
                    <li><a href="#screenshots">应用截图</a></li>
                    <li><a href="#download">下载</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
            <div class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

    <section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h2>专业的图片编辑百宝箱</h2>
                <p>崇阳百宝箱是一款功能强大的图片编辑应用，集成了多种实用工具，让您的照片编辑体验更加流畅、高效。支持智能美化、滤镜特效、文字贴纸等多种功能，满足您的创意需求。</p>
                <div class="cta-buttons">
                    <a href="#download" class="btn btn-primary">立即下载</a>
                    <a href="#features" class="btn btn-secondary">了解更多</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="images/hero-app.png" alt="崇阳百宝箱应用展示">
            </div>
        </div>
    </section>

    <section id="features" class="features">
        <div class="container">
            <h2 class="section-title">功能特点</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-crop"></i>
                    </div>
                    <h3>智能裁剪</h3>
                    <p>多种裁剪比例可选，支持自由裁剪，满足各种场景需求。智能识别内容，推荐最佳裁剪区域。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-adjust"></i>
                    </div>
                    <h3>滤镜特效</h3>
                    <p>丰富的滤镜库，一键美化照片，打造专业级照片效果。支持自定义滤镜强度，满足个性化需求。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h3>一键美化</h3>
                    <p>智能识别照片，自动调整亮度、对比度和饱和度，让照片更出彩。支持人脸识别，智能美颜。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-text-height"></i>
                    </div>
                    <h3>文字贴纸</h3>
                    <p>添加个性化文字和贴纸，多种字体和样式可选，让您的照片表达更多。支持自定义贴纸位置和大小。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3>时间线功能</h3>
                    <p>自动整理您的照片，按时间顺序展示，轻松回顾美好回忆。支持按日期、月份、年份筛选查看。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <h3>便捷分享</h3>
                    <p>一键分享到微信、微博、QQ等社交媒体，与朋友分享您的创作。支持生成分享链接，方便传播。</p>
                </div>
            </div>
        </div>
    </section>

    <section id="screenshots" class="screenshots">
        <div class="container">
            <h2 class="section-title">应用截图</h2>
            <div class="screenshot-slider">
                <div class="screenshot-container">
                    <div class="screenshot">
                        <img src="images/screenshot1.png" alt="首页界面">
                    </div>
                    <div class="screenshot">
                        <img src="images/screenshot2.png" alt="编辑界面">
                    </div>
                    <div class="screenshot">
                        <img src="images/screenshot3.png" alt="时间线界面">
                    </div>
                    <div class="screenshot">
                        <img src="images/screenshot4.png" alt="个人中心界面">
                    </div>
                </div>
                <div class="slider-controls">
                    <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </section>

    <section id="download" class="download">
        <div class="container">
            <h2 class="section-title">立即下载</h2>
            <p class="download-desc">崇阳百宝箱现已上线各大应用商店，立即下载体验强大的图片编辑功能！支持iOS和Android平台，为您提供流畅的跨平台体验。</p>
            <div class="download-options">
                <a href="#" class="download-btn">
                    <i class="fab fa-apple"></i>
                    <span>
                        <small>下载自</small>
                        App Store
                    </span>
                </a>
                <a href="#" class="download-btn">
                    <i class="fab fa-android"></i>
                    <span>
                        <small>下载自</small>
                        Google Play
                    </span>
                </a>
            </div>
            <div class="qr-code">
                <img src="images/qr-code.png" alt="扫码下载">
                <p>扫描二维码下载</p>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title">联系我们</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <p>xigua8hao@163.com</p>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <p>400-123-4567</p>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <p>中国·北京市海淀区科技园区</p>
                    </div>
                    <div class="social-media">
                        <a href="#" class="social-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="24" height="24" fill="currentColor">
                                <path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"/>
                            </svg>
                        </a>
                        <a href="#" class="social-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24" fill="currentColor">
                                <path d="M407 177.6c7.6-24-13.4-46.8-37.4-41.7-22 4.8-28.8-28.1-7.1-32.8 50.1-10.9 92.3 37.1 76.5 84.8-6.8 21.2-38.8 10.8-32-10.3zM214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6 79.5-33.6 140.5-16.8 114 51.4-3.7 9.4 1.1 10.9 8.3 13.1 135.7 42.3 34.8 215.2-169.7 215.2zm143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7-84.8 8.6-148.8 60.3-143.3 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.3-116zM347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3 72.3-15.2 134.8 52.8 111.7 124-7.4 24.2 29.1 37 37.4 12 31.9-99.8-55.1-195.9-157.4-174.3zm-78.5 311c-17.1 38.8-66.8 60-109.1 46.3-40.8-13.1-58-53.4-40.3-89.7 17.7-35.4 63.1-55.4 103.4-45.1 42 10.8 63.1 50.2 46 88.5zm-86.3-30c-12.9-5.4-30 .3-38 12.9-8.3 12.9-4.3 28 8.6 34 13.1 6 30.8.3 39.1-12.9 8-13.1 3.7-28.3-9.7-34zm32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4-2.9 5.1-1.4 10.6 3.7 12.9 5.1 2 11.7-.3 14.6-5.4 2.8-5.2 1.1-10.9-4-12.9z"/>
                            </svg>
                        </a>
                        <a href="#" class="social-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24" height="24" fill="currentColor">
                                <path d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z"/>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="feedback-form">
                        <div class="form-group">
                            <input type="text" id="name" placeholder="您的姓名" required>
                        </div>
                        <div class="form-group">
                            <input type="email" id="email" placeholder="您的邮箱" required>
                        </div>
                        <div class="form-group">
                            <textarea id="message" placeholder="您的留言" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交反馈</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="images/logo.png" alt="崇阳百宝箱">
                    <p>崇阳百宝箱 - 您的多功能图片编辑工具</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>快速链接</h4>
                        <ul>
                            <li><a href="#home">首页</a></li>
                            <li><a href="#features">功能特点</a></li>
                            <li><a href="#screenshots">应用截图</a></li>
                            <li><a href="#download">下载</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>支持</h4>
                        <ul>
                            <li><a href="#">常见问题</a></li>
                            <li><a href="#">使用教程</a></li>
                            <li><a href="privacy-policy.html">隐私政策</a></li>
                            <li><a href="#">用户协议</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 崇阳百宝箱. 保留所有权利。版权所有 chongyang</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 